<template>
  <div id="listContainer" class="list_container">
    <div v-show="sholateral_block" class="lateral_block" @click="onLeftScroll"><i class="el-icon-arrow-left" style="font-size:24px" /></div>
    <div id="ListContainerDiv" ref="ListContainerDiv" class="lateral-sliding">
      <div v-for="(item,index) in scroll_List" id="itemContainer" :key="index" class="itemContainer" @click="onScrollItemClick(item,index)">
        <component :is="currentComponent" :sole-item="item" :active-item="index===activeIndex" />
      </div>
    </div>
    <div v-show="sholateral_block" class="lateral_block" @click="onRightScroll"><i class="el-icon-arrow-right" style="font-size:24px" /></div>
  </div>
</template>

<script>
export default {
  name: 'BaseHScroll',
  props: {
    currentComponent: {
      type: Object,
      default: () => {}
    },
    scrollList: {
      type: Array,
      default: () => []
    }

  },
  data() {
    return {
      scroll_List: [{}], // 默认第一个是为了,初始化加载能够获取到itemContainer
      sholateral_block: false,
      itemWidth: 0,
      activeIndex: 0
    }
  },
  watch: {
    scrollList(newvalue) {
      if (this.scrollList.length > 0) {
        this.getItemContainerWidth()
        this.scroll_List = newvalue
      } else {
        this.scroll_List = []
      }
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.setScroolFun()
      // if (this.scrollList.length > 0) {
      //   this.getItemContainerWidth()
      // }
    })
  },
  beforeDestroy() {
    if (!this.documentObj) return
    this.documentObj.removeEventListener('DOMMouseScroll', this.handlerMouserScroll)
    this.documentObj.removeEventListener('mousewheel', this.handlerMouserScroll)
  },
  methods: {
    onScrollItemClick(data, index) {
      this.activeIndex = index
      this.$emit('onScrollItemClick', data)
    },

    //   左边滚动
    onLeftScroll() {
      this.handlerClickScroll(-1)
    },
    //   右边滚动
    onRightScroll() {
      this.handlerClickScroll(1)
    },
    getItemContainerWidth() {
      const documentObj1 = document.getElementById('listContainer')
      const documentObj2 = document.getElementById('itemContainer') // 获取DOM元素节点
      const listWidth = documentObj1.clientWidth
      const itemWidth = documentObj2.clientWidth
      const allItemWidth = itemWidth * this.scrollList.length
      if (allItemWidth > listWidth) {
        this.itemWidth = itemWidth
        this.sholateral_block = true
      } else {
        this.sholateral_block = false
      }
    },
    /* 容器绑定鼠标滚轮事件*/
    setScroolFun() {
      // 绑定的容器
      this.documentObj = this.$refs.ListContainerDiv // 获取DOM元素节点
      // 添加监听事件（不同浏览器，事件方法不一样，所以可以作判断，也可以如下偷懒）
      this.documentObj.addEventListener('DOMMouseScroll', this.handlerMouserScroll, false)// 滚轮事件
      this.documentObj.addEventListener('mousewheel', this.handlerMouserScroll, false)// 滚轮事件
    },
    // 鼠标点击滚动块的逻辑
    handlerClickScroll(moveStep) {
      let step = 0
      step = moveStep > 0 ? moveStep * this.itemWidth : moveStep * this.itemWidth
      const slipNum = 0.8
      const endNum = 5
      let decreasingPaceNum = step
      const paceNum = 70

      /* 效果一*/
      const t = setInterval(() => {
        if (Math.abs(decreasingPaceNum) < endNum) {
          clearInterval(t)
          return
        }
        decreasingPaceNum = decreasingPaceNum * slipNum
        this.documentObj.scrollLeft = this.documentObj.scrollLeft + decreasingPaceNum
      }, paceNum)
    },
    // 鼠标滚动监听的逻辑
    handlerMouserScroll(event) {
      // 获取滚轮跨距，兼容获取方式
      const detail = event.wheelDelta || event.detail || event.wheelDeltaY
      /* 反向*/
      const moveForwardStep = -1
      /* 正向*/
      const moveBackStep = 1
      let step = 0
      // 如果跨步大于0，表明正向跨步，将跨步放大100倍，改变滑动速度，如果跨步小于0，表明反向跨步，将跨步放大500倍，改变滑动速度
      step = detail > 0 ? moveForwardStep * 80 : moveBackStep * 80
      /* 覆盖当前滚动条的位置,单位是像素，叠增或剃减*/
      // this.documentObj.scrollLeft = this.documentObj.scrollLeft + step

      // 平滑值(越小越平滑越持久，反之，总之。总之，不能小于等于0，不能大于等于1，作者建议值：0.8)
      const slipNum = 0.8
      // 末尾值（越小，则越平稳，越大，则越仓促，作者建议值：5）
      const endNum = 5
      /* 递减步伐最大初始值=滚轮单位跨步值*/
      let decreasingPaceNum = step
      /* 平滑速度，越大，则越慢，越小，则越慢，作者建议值：70*/
      const paceNum = 70

      /* 效果一*/
      const t = setInterval(() => {
        if (Math.abs(decreasingPaceNum) < endNum) {
          clearInterval(t)
          return
        }
        decreasingPaceNum = decreasingPaceNum * slipNum
        this.documentObj.scrollLeft = this.documentObj.scrollLeft + decreasingPaceNum
        console.log(' this.documentObj.scrollLeft', this.documentObj.scrollLeft)
      }, paceNum)
    }
  }
}
</script>

<style lang="scss" scoped>
.list_container {
    display: flex;
    cursor:pointer;
    align-items: center;

}

.lateral-sliding::-webkit-scrollbar {
    height: 0 !important
}

.lateral-sliding {
    display: flex;
    overflow-y: hidden;
    overflow-x: auto;
    width: 100%;
    height: 100%;
    // margin:  0 10px;
    // min-height: 36px;
}

.lateral_block {
    // background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.itemContainer{
  padding: 5px;

}

</style>
